<template>
  <el-form label-width="80px">
    <!--<el-form-item label="选择用户">-->
      <!--<el-select v-model="members" multiple filterable  placeholder="请输入关键词" :filter-method="remoteMemberMethod"-->
                 <!--:loading="loading" style="width: 100%">-->
        <!--<el-option v-for="item in mItems" :key="item.id" :label="item.name" :value="item.id">-->
          <!--<span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>-->
          <!--<span style="float: left">{{ item.username }}</span>-->
        <!--</el-option>-->
      <!--</el-select>-->
    <!--</el-form-item>-->
    <el-form-item label="选择用户" >
      <template>
        <!--<el-select v-model="members" multiple filterable placeholder="请选择"  :clearable="true" style="width: 300px" :filter-method="remoteMemberMethod" >-->
          <!--<el-option v-for="item in mItems" :key="item.id" :label="item.name" :value="item.id">-->
            <!--<span style="float: left">{{ item.name }}</span>-->

          <!--</el-option>-->
        <!--</el-select>-->

        <el-checkbox-group v-model="members" size="medium"   style="margin-bottom: 20px" >
          <el-checkbox-button v-for="item in mItems" :key="item.id" :label="item.id"  :value="item.id" >{{item.name}}</el-checkbox-button>
        </el-checkbox-group>
      </template>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {
    addGather, findLike, findUser
  } from '@/api/admin/region/index';
  // import {
  //   findLike
  // } from '@/api/admin/user/index';
  import { mapGetters } from 'vuex';

  export default {
    props: {
      groupId: {},
      mItems: []
    },
    data() {
      return {
        nItems: [],
        lItems: [],
        // mItems: [],
        members: [],
        list: [],
        loading: false
      }
    },
    computed: {
      ...mapGetters([
        'elements'
      ])

    },
    methods: {
      getUser() {
        findUser(this.groupId).then(response => {
          this.mItems = response.data
        });
      },

      remoteMemberMethod(query) {
        if (query !== '') {
          this.loading = true;
          this.loading = false;
          findLike(query, this.groupId).then(response => {
            this.mItems = response.data;
            this.total = response.data.length;
            this.loading = false;
          });
        } else {
          findUser(this.groupId).then(response => {
            this.mItems = response.data;
            this.total = response.data.length;
            this.loading = false;
          });
        }
      },
      onSubmit() {
        const personList = [];
        if (this.members.length > 0) {
          this.members.forEach(val => {
            personList.push({ regionId: this.groupId, userId: val })
          })
          addGather(personList).then(() => {
            this.members = [];
            this.$emit('closeUserDialog');
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            });
          });
        }
      }
    }
  }
</script>
